<template>
  <div class="distribution-container">
    <div class="chart" id="chart_right2"></div>
    <div class="info-container">
      <div class="info-item">
        <div class="icon normal-icon"></div>
        <span>正常设备: {{ normalEquipment }}</span>
      </div>
      <div class="info-item">
        <div class="icon alarm-icon"></div>
        <span>报警设备: {{ alarmEquipment }}</span>
      </div>
      <div class="info-item">
        <div class="icon offline-icon"></div>
        <span>离线设备: {{ offlineEquipment }}</span>
      </div>
      <div class="info-item">
        <div class="icon fault-icon"></div>
        <span>故障设备: {{ faultEquipment }}</span>
      </div>
      <div class="info-item">
        <div class="icon unable-icon"></div>
        <span>未启用设备: {{ unableEquipment }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts-gl';
import { getsystem } from '@/api/echarts';

export default {
  name: "distribution",
  data() {
    return {
      normalEquipment: 0,
      alarmEquipment: 0,
      offlineEquipment: 0,
      faultEquipment: 0,
      unableEquipment: 0
    };
  },
  created() {
    getsystem().then(res => {
      const data = res.msg;
      this.normalEquipment = data.normalEquipment;
      this.alarmEquipment = data.alarmEquipment;
      this.offlineEquipment = data.offlineEquipment;
      this.faultEquipment = data.faultEquipment;
      this.unableEquipment = data.unableEquipment;
      this.initEchart();
    });
  },
  methods: {
    initEchart() {
      const myChart = echarts.init(document.getElementById('chart_right2'));
      const option = {
        color: ['#00FFBF', '#FF007F', '#8F00FF', '#FF6F61', '#DFFF00'],
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)'
        },
        series: [
          {
            type: 'pie',
            radius: ['20%', '80%'],
            roseType: 'area',
            label: { show: false },
            labelLine: { show: true, length: 15, length2: 50, lineStyle: { type: 'dotted' } },
            data: [
              { value: this.normalEquipment, name: '正常' },
              { value: this.alarmEquipment, name: '报警' },
              { value: this.offlineEquipment, name: '离线' },
              { value: this.faultEquipment, name: '故障' },
              { value: this.unableEquipment, name: '未启用' }
            ]
          }
        ]
      };
      myChart.setOption(option);
      window.addEventListener('resize', () => myChart.resize());
    }
  }
};
</script>

<style lang="scss" scoped>
.distribution-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;

  .chart {
    height: 20vh;
    width: 50%;
  }

  .info-container {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 45%;
    color: #ffffff;
  }

  .info-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    .icon {
      width: 20px;
      height: 20px;
      margin-right: 10px;
    }

    .normal-icon {
      background-color: #00FFBF;
    }

    .alarm-icon {
      background-color: #FF007F;
    }

    .offline-icon {
      background-color: #8F00FF;
    }

    .fault-icon {
      background-color: #FF6F61;
    }

    .unable-icon {
      background-color: #DFFF00;
    }
  }
}
</style>
